<template>
    <div class="pop-preview-publishing">
        <el-dialog
            title="预览"
            :visible.sync="dialogVisible"
            width="1000px"
            top="5vh"
        >
            <div class="content-box">
                <div class="iframe-box" style="width: 375px; height: 650px">
                   <!-- <iframe
                        src="https://m.jd.com"
                        
                    ></iframe> -->
					<priHomePage ref="priHomePage"></priHomePage>
                </div>
                <div class="info-box">
                    <div class="img-box">
                        <img :src="img_url"  v-if="img_url"/>
                        <span>微信扫一扫预览效果</span>
                    </div>
                    <div class="download">
                        <el-button @click="downloadFun">下载二维码</el-button>
                    </div>
                    <div class="link" >
                        <div class="but" v-if="link_input">
                            <el-input
                                v-model="link_input"
                                class="input-w"
                                disabled
                            ></el-input>
                            <el-button
                                type="primary"
                                @click="copyInformation"
                                :data-clipboard-text="link_input"
                                class="copy-link"
                                >复制</el-button
                            >
                            <div class="tis">
                                您可以将活动链接复制到您的公众号菜单
                            </div>
                        </div>
                    </div>
                    <div class="but-box">
                        <el-button type="primary" @click="releaseFun" v-if="hd.status == 1">立即发布</el-button>
                        <el-button @click="editHd();dialogVisible = false"
                            >继续编辑</el-button
                        >
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Clipboard from "clipboard";
import config from "@/js/conf/Config.js";
import priHomePage from "./appComponrnts/priview-home-page.vue";

export default {
    props: [],
    components: {priHomePage},
    computed: {},
    data() {
        return {
            dialogVisible: false,
            link_input: "",
            img_url:"",//https://cdn.imiyun.com/d/cp100/goods/a640553989964ea1a7fb9abb0214b563.jpeg?x-oss-process=image/resize,m_lfit,w_1280
			hd:{},
		};
    },
    created() {},
    mounted() {},
    methods: {
        initData(item) {
			this.hd = item;
            this.dialogVisible = true;
			this.loadPreviewData(item.id);
        },
		
		releaseFun()
		{
			this.dialogVisible = false;
			this.$emit('releaseFun',this.hd);
		},
		
		editHd()
		{
			if(!this.hd)return;
			uni.navigateTo({
			    url: `/pages/interactiveActivity/create-activity?page_tab=2&cat_id=${this.hd.cat_id}&hd_type=${this.hd.type}&tool_id=${this.hd.hdid}&hdongid=${this.hd.id}&idyun=${this.hd.shopid_yd}`,
			});
		},
		
		async loadPreviewData(id)
		{
			let url = config.HD_MS_HDONG_HD_REVIEW;
			let param = {};
			param.hdongid = id;
			let res = await this.$api({ url: url, data: param });
			if(!res)return;
			if(res.status == 1 && res.data)
			{
				res = res.data;
				this.img_url = res.qrcode_wx;
				this.link_input = res.h5_url;
				if(res.event_ls)
					this.$refs.priHomePage.initData(res.event_ls);
			}
		},
		
        downloadFun() {
            window.open(this.img_url, "_blank");
        },
		
        copyInformation() {
            const clipboard = new Clipboard(".copy-link");
            clipboard.on("success", (e) => {
                // 释放内存
                this.$msg({ title: `复制成功` });
                clipboard.destroy();
            });
            clipboard.on("error", (e) => {
                // 不支持复制
                this.$msg({ title: "该浏览器不支持复制" });
                // 释放内存
                clipboard.destroy();
            });
        },
    },
};
</script>

<style lang="scss" scoped >
.pop-preview-publishing {
    .content-box {
        display: flex;
        .iframe-box {
            width: 375px;
			border: 1px #DDD solid;
            overflow: hidden;
            iframe {
                border: none;
            }
        }
        .info-box {
            width: calc(100% - 415px);
            padding: 0 20px;
            text-align: center;
            padding-top: 10px;
            .img-box {
                width: 300px;
                height: 300px;
                margin: 0 auto;
                margin-bottom: 50px;
                img {
                    width: 100%;
                    height: 100%;
                }
                span {
                    color: #aaa;
                    font-size: 12px;
                }
            }
            .download {
                margin-bottom: 30px;
            }

            ::v-deep.link {
                margin-bottom: 100px;
                .input-w {
                    width: 330px;
                }
                .el-input__inner {
                    border-right: none;
                    border-radius: 4px 0 0 4px;
                }
                .el-button {
                    border-radius: 0 4px 4px 0;
                }
                .but {
                    margin: 0 auto;
                }
                .tis {
                    margin-top: 5px;
                    color: #aaa;
                    font-size: 12px;
                    text-align: left;
                    padding-left: 74px;
                }
            }
            .but-box {
            }
        }
    }
}
</style>
